<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>暗黑模式切换按钮</title>
    <style>
        .app {
            width: 100%;
            height: 100vh;
            background-color: #ffffff;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .label47 {
            width: 60px;
            height: 60px;
            border: 2px solid #000;
            position: relative;
            cursor: pointer;
            border-radius: 50%;
            box-shadow: -6px 6px 0 #000;
            box-sizing: border-box;
            transition: all 0.1s;
        }

        .checkbox47 {
            display: none;
        }

        .status47 {
            width: 30px;
            height: 30px;
            background-color: transparent;
            box-shadow: inset -12px -8px 0 #000;
            border-radius: 50%;
            position: absolute;
            top: 12px;
            left: 12px;
            box-sizing: border-box;
            transition: all 0.4s;
        }

        .label47:active {
            box-shadow: 0px 0px #000;
            transform: translate(-6px, 6px);
        }

        .checkbox47:checked+.status47 {
            width: 24px;
            height: 24px;
            box-shadow: inset -30px -30px 0 #000;
            top: 16px;
            left: 16px;
        }

        .checkbox47:checked+.status47:after {
            content: '';
            width: 10px;
            height: 10px;
            background-color: #000;
            box-shadow: 0 18px 0 -4px #000,
                18px 0 0 -4px #000,
                0 -18px 0 -4px #000,
                -18px 0 0 -4px #000,
                -12px 12px 0 -4px #000,
                -12px -12px 0 -4px #000,
                12px -12px 0 -4px #000,
                12px 12px 0 -4px #000;
            border-radius: 50%;
            position: absolute;
            top: 7px;
            left: 7px;
            box-sizing: border-box;
            animation: anieff47 0.4s ease-out forwards;
        }

        @keyframes anieff47 {
            0% {
                transform: scale(0);
            }

            100% {
                transform: scale(1);
            }
        }
    </style>
</head>

<body>
    <div class="app">
        <label class="label47">
            <input type="checkbox" class="checkbox47" />
            <div class="status47"></div>
        </label>
    </div>
</body>

</html>